@extends('Admin.index')

@section('css')
    <link rel="stylesheet" href="/libs/webuploader/webuploader.css" type="text/css"/>
    <style>
        .image-box {
            width: 29px;
            height: 29px;
            margin-bottom: 0;
            text-align:center;
        }
        .info {
            display:block;
            height:40px;
            line-height:40px;
        }
        .image-box img {
            float:left;
            width: 18px;
            height: 18px;
        }
    </style>
@endsection

@section('content')

    <div class="app-third-sidebar">
        <nav class="ui-nav " style="display: block;">
            <ul>
                <li>
                    <a href="/admin/permission/group"><span>权限组</span></a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="wrapper">

        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-md-2">
                        <a class="btn btn-success" role="button" onclick="PermissionGroup.edit(0)">添加权限组</a>
                    </div>

                    <div class="col-md-10" >
                        <form class="form-inline" id="search-form" onsubmit="return false;">

                            <div class="input-group">
                                <input type="text" class="form-control" name="group_name" placeholder="请输入权限组名称">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" name="search" type="button">查询</button>
                                     <button class="btn btn-warning" name="to-reset" type="button">重置</button>
                                </span>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        <br>

        <div class="row">

            <div class="col-lg-12">
                <div id="toolbar">

                </div>
                <table id="table"></table>
            </div>

        </div>

    </div>

@endsection

@section('js')

    <script type="text/javascript" src="/libs/webuploader/webuploader.js"></script>

    <script>

        // 设置全局的tableURL，这种方式主用于base.js里表格查询的参数设置
        var bootstrap_table_ajax_url = '/admin/permission/group/search';

        $('#table').bootstrapTable({
            classes: 'table table-hover', //bootstrap的表格样式
            sidePagination: 'server', //获取数据方式【从服务器获取数据】
            pagination: true, //分页
            height: $(window).height() - 200, //表格高度
            pageNumber: 1, //页码【第X页】
            pageSize: 10, //每页显示多少条数据
            queryParamsType: 'limit',
            queryParams: function (params) {
                var dt = E.getFormValues('search-form');
                $.extend(params, dt);
                return params;
            },

            url: bootstrap_table_ajax_url,// ajax链接
            sortName: 'group_id', //排序字段
            sortOrder: 'DESC',//排序方式
            columns: [ //字段
                { title: '操作', field: 'operation', align: 'center', width: '100px' },
                { title: '权限组名称', field: 'group_name', align: 'left', width: '200px'  },
                { title: '权限组简称', field: 'short_name', align: 'left', width: '150px'  },
                { title: '排序序号', field: 'sort', align: 'center'},
                { title: '最小权限ID',  field: 'min_permission_id', align: 'center' },
                { title: '最大权限ID',  field: 'max_permission_id', align: 'center' }
            ]

        });

        var PermissionGroup = {

            layer_index: 0,

            edit: function (group_id) {

                var html = '<form id="group-form" onsubmit="return false;" class="form-horizontal" role="form">';
                html += '<input type="hidden" name="group_id" id="group_id" value="0">';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="group_name"><span class="red pr5">*</span> 权限组名称：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="group_name" name="group_name" maxlength="20" value="" placeholder="请输入权限组名称">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="short_name"><span class="red pr5">*</span> 权限组简称：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="short_name" name="short_name" maxlength="20" value="" placeholder="请输入权限组简称">';
                html += '</div>';
                html += '</div>';

                /*html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="icon"><span class="red pr5">*</span> 图标：</label>';
                html += '<div class="col-sm-8">';
                html += '<div id="filePicker1">选择图标</div>';
                html += '<div class="thumbnail image-box" id="image-box1"></div>';
                html += '</div>';
                html += '<input type="hidden" name="icon" id="icon">';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="active_icon"><span class="red pr5">*</span> 选中后图标：</label>';
                html += '<div class="col-sm-8">';
                html += '<div id="filePicker2">选择图标</div>';
                html += '<div class="thumbnail image-box" id="image-box2"></div>';
                html += '</div>';
                html += '<input type="hidden" name="active_icon" id="active_icon">';
                html += '</div>';*/

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="sort"><span class="red pr5">*</span> 权限组序号：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="aort" name="sort" maxlength="20" value="" placeholder="请输入权限组号">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="min_permission_id"><span class="red pr5">*</span> 最小权限ID：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="min_permission_id" name="min_permission_id" maxlength="20" value="" placeholder="请输入最小权限">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="max_permission_id"><span class="red pr5">*</span> 最大权限ID：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="max_permission_id" name="max_permission_id" maxlength="20" value="" placeholder="请输入最大权限">';
                html += '</div>';
                html += '</div>';

                html += '</form>';

                this.layer_index = layer.open({
                    title: group_id == 0 ? '添加权限组' : '修改权限组',
                    type: 1,
                    offset: '50px',
                    area:['500px','500px'],
                    scrollbar: false,
                    content: html,
                    btn: ['保存', '取消'],
                    yes: function () {

                        var dt = E.getFormValues('group-form');

                        //验证单
                        if (dt.group_name == '') {
                            layer.alert('请输入权限组名称', {icon: 2, offset: '70px'});
                            return false;
                        }
                        if (dt.short_name == '') {
                            layer.alert('请输入权限组简称', {icon: 2, offset: '70px'});
                            return false;
                        }

                        /*if (dt.icon == '') {
                            layer.alert('请上传图标文件', {icon: 2, offset: '70px'});
                            return false;
                        }
*/
                        if (dt.sort == '') {
                            layer.alert('请输入权限组序号', {icon: 2, offset: '70px'});
                            return false;
                        }
                        if (dt.min_permission_id == '') {
                            layer.alert('请输入最小权限ID', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if ( isNaN(dt.min_permission_id)){
                            layer.alert('最小权限ID必须是数字', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (dt.max_permission_id == '') {
                            layer.alert('请输入最大权限ID', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (isNaN(dt.max_permission_id)) {
                            layer.alert('最大权限ID必须是数字', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (dt.max_permission_id < dt.min_permission_id ){
                            layer.alert('最大权限ID不能小于最小权限ID', {icon: 2, offset: '70px'});
                            return false;
                        }

                        $.ajax({
                            type: 'POST',
                            url: '/admin/permission/group/store',
                            data: dt,
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert('权限组保存成功', {icon: 1, offset: '70px', time: 1500});
                                    if (dt.group_id > 0) {
                                        layer.close(PermissionGroup.layer_index);
                                    } else {
                                        $('#group-form').find('input,select').val('');
                                        $('#icon').remove();
                                        $('.image-box').html('');
                                    }

                                    $('#table').bootstrapTable('refresh');
                                } else {
                                    layer.alert(res.message, {icon: 2, offset: '70px'});
                                }
                            }
                        });

                    }
                });

                //$('#group_name').focus();

                if (group_id > 0) {

                    $.ajax({
                        type: 'get',
                        url: '/admin/permission/group/' + group_id,
                        success: function (res) {
                            if ( res.code == 200) {
                                $('#group_id').val(res.data.group_id);
                                $('#group_name').val(res.data.group_name);
                                $('#short_name').val(res.data.short_name);
                                $('[name="sort"]').val(res.data.sort);
                                $('#min_permission_id').val(res.data.min_permission_id);
                                $('#max_permission_id').val(res.data.max_permission_id);
                                if (res.data.icon) {
                                    $('#icon').val(res.data.icon);
                                    $('#image-box1').html('<img src="' + res.data.icon + '">');
                                }
                                if (res.data.active_icon) {
                                    $('#active_icon').val(res.data.active_icon);
                                    $('#image-box2').html('<img src="' + res.data.active_icon + '">');
                                }
                            } else {
                                layer.alert(res.message ,{icon: 2, offset: '70px', time: 1500});
                            }
                        }
                    });

                }

                //PermissionGroup.upload('filePicker1', 'image-box1', 'icon');
                //PermissionGroup.upload('filePicker2', 'image-box2', 'active_icon');

            }/*,

            upload: function(pick, list, name) {

                var $list = $('#'+ list );

                var uploader = WebUploader.create({
                    auto: true,    //  自动上传,为true就是选择确定后直接就传了
                    swf: '/libs/webuploader/Uploader.swf',     //  flash类型处理文件
                    server: '/upload?action=permission/group',   //  服务器地址
                    pick: '#' + pick,    //  选择图片的按钮DOM
                    resize: false
                });

                // 文件上传过程中创建进度条实时显示。
                uploader.on( 'uploadProgress', function( file, percentage ) {

                    var $li = $( '#' + file.id ),
                        $percent = $li.find('.progress span');
                    // 避免重复创建
                    if ( !$percent.length ) {
                        $percent = $('<p class="progress"><span></span></p>')
                                .appendTo( $li )
                                .find('span');
                    }
                    $percent.css( 'width', percentage * 100 + '%' );

                });

                // 完成上传后，删除进度条（不论成功失败）。
                uploader.on( 'uploadComplete', function( file ) {
                    $( '#' + file.id ).find('.progress').remove();
                });


                //   成功后的操作
                uploader.on( 'uploadSuccess', function( file, res ) {
                    if (res.code == 200) {
                        $list.html('<img src="'+ res.data.url + '">');
                        $('#'+ name).val(res.data.url);
                    } else {
                        layer.alert(res.message ,{ icon:2, offset: '70px', time:1500 });
                    }
                });

            }*/

        }

    </script>

@endsection